<template>

    <div class="payoneer-billing">

        <h3>
            <strong>Billing info</strong>
            <span style="flex:1"></span>
            <a v-if="addressList.length > 0">
                <span v-if="tab == 'input' && !billingEmpty" @click="inputToBack()">Back</span>
                <span v-if="tab == 'input' && billingEmpty && addressList.length > 0" @click="setTab('select')">Address book ({{addressList.length}})</span>
                <span v-if="tab == 'select'" @click="setTab('input')">Back</span>
                <span v-if="tab == 'default'" @click="antherAddress()">Use another address</span>
            </a>
        </h3>

        <div class="payoneer-default" v-if="tab == 'default'">
            <h4 v-text="addressBilling.first_name"></h4>
            <p v-text="[addressBilling.street,addressBilling.district].join(' ')"></p>
            <p v-text="[addressBilling.country,addressBilling.state,addressBilling.city,addressBilling.post_code].filter(i=>i).join('/')"></p>
            <span @click="editDefaultAddress()"><svg-icon name="edit" /></span>
            <i @click="removeDefaultAddress()"><svg-icon name="dialog-close-medium" /></i>
        </div>

        <div class="payoneer-input" v-if="tab == 'input'">
            <CommonAddressForm v-model="addressForm" :rules="rules" @validate="updateValidate($event)" />
            <a v-if="billingEmpty" @click="saveBillingAddress()" :class="{active:!addressForbid}">Save as default bill address</a>
        </div>

        <ul class="address-list" v-if="tab== 'select'">
            <li v-for="item in addressList" :key="item.id" @click="setAddressActive(item)">
                <h4 v-text="item.first_name"></h4>
                <p v-text="[item.street,item.district].join(' ')"></p>
                <p v-text="[item.country,item.state,item.city,item.post_code].filter(i=>i).join('/')"></p>
            </li>
        </ul>

    </div>

</template>

<script>
import { getRules } from "@/utils/address-rules";

const rules2 = getRules();

// 手机不验证
rules2.phone.map(i => i.required && (i.required = false))
// 地址名称不验证
rules2.country = []

export default {
    props: {
        value: { type: Object, default: () => ({}) },
        tab: { type: String, default: 'input' },
        save: { type: Boolean, default: false },
        forbid: { type: Boolean, default: false },
        loading: { type: Boolean, default: false },
        addressBilling: { type: Object, default: () => ({}) },
        addressList: { type: Array, default: () => [] },
        option: { type: Object, default: () => ({}) },
        approve_code: { type: String, default: () => '' },
    },
    data () {
        return {
            rules: rules2,
            addressForbid: true,
            addressEdit: false,
            addressForm: {
                first_name: '', // string 姓名
                country_code: '', // string 国家（国际二字码 标准ISO 3166-2 ）
                country: '', // string 国家名称
                city: '', // string 城市
                state: '', // string  州/省
                district: '', // string 区、县（可对应为adress 2）
                street: '', // string 街道/详细地址（可对应为adress 1）
                email: '', // string 邮箱
                phone: '', // string 电话
                post_code: '', // string 邮编
            }
        };
    },
    computed: {
        billingEmpty () {
            const keys = ['first_name', 'country_code', 'country', 'city', 'state', 'district', 'street', 'email', 'phone', 'post_code']
            if (this.addressBilling && keys.find(k => this.addressBilling[k])) {
                return false;
            } else {
                return true
            }
        }
    },
    watch: {
        addressForm: {
            deep: true,
            handler (newval) {
                this.$emit('input', newval)
                this.checkStatus()
            }
        },
    },
    methods: {
        // 更新验证
        updateValidate (forbid) {
            this.addressForbid = forbid;
            this.checkStatus();
        },

        // 修改地址
        setTab (tab) {
            this.$emit('update:tab', tab)
            setTimeout(() => this.checkStatus(), 1);
        },

        antherAddress () {
            Object.keys(this.addressForm).map(key => this.addressForm[key] = '')
            this.addressEdit = false;
            this.addressForbid = true;
            this.setTab('input')
        },
        editDefaultAddress () {
            Object.keys(this.addressForm).map(key => this.addressForm[key] = this.addressBilling[key] || '')
            this.addressEdit = true;
            this.setTab('input')
        },
        // 选中地址
        setAddressActive (item) {
            Object.keys(this.addressForm).map(k => this.addressForm[k] = item[k])
            this.setTab('input')
        },
        // 修改地址后返回
        inputToBack () {
            Object.keys(this.addressForm).map(key => this.addressForm[key] = this.addressBilling[key] || '')
            this.setTab('default')
        },
        // 保存地址
        saveBillingAddress () {

            const request = {
                ...this.addressForm,
                type: 1,
            }

            delete request.id;
            this.$emit('update:loading', true)
            this.$http('Order.setPayoneerBilling/' + this.approve_code, request).then(res => {
                if (res.code === 0) {

                    this.$uxMessage.success('Save billing address success!')
                    this.$emit('update:loading', false)
                    this.$emit('update:addressBilling', JSON.parse(JSON.stringify(this.addressForm)))
                    this.setTab('default')
                } else {
                    this.$emit('update:loading', false)
                    this.$uxMessage.error(res.msg)
                }
            })

        },
        // 删除默认地址
        removeDefaultAddress () {
            this.$emit('update:loading', true)
            this.$http('address.removeBilling').then(res => {
                if (res.code === 0) {

                    Object.keys(this.addressForm).map(k => this.addressForm[k] = '')

                    this.addressForbid = true;
                    this.$uxMessage.success('Delect billing address success!')
                    this.$emit('update:loading', false)
                    this.$emit('update:addressBilling', null)
                    this.$emit('update:forbid', true)
                    this.setTab('input')
                } else {
                    this.$emit('update:loading', false)
                    this.$uxMessage.error(res.msg)
                }
            })
        },
        // 检查是否需要保存
        checkStatus () {
            if (this.tab == 'default') {
                this.$emit('update:save', false)
                this.$emit('update:forbid', false)
            } else if (this.tab == 'select') {
                this.$emit('update:save', false)
                this.$emit('update:forbid', true)
            } else if (this.tab == 'input') {
                // 输入的
                this.$emit('update:forbid', this.addressForbid)
                this.$emit('update:save', this.addressEdit)
            }
        }

    },
    created () {
        if (this.billingEmpty) {
            this.setTab('input')
        } else {
            this.setTab('default')
        }
    },
};
</script>
<style lang="scss" scoped>
.payoneer-billing {
    h3 {
        margin-top: 24px;
        display: flex;
        & > strong {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 18px;
            color: #292929;
            line-height: 24px;
        }
        & > a {
            display: flex;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #087196;
            line-height: 24px;
            text-align: left;
            cursor: pointer;
            &:hover {
                color: #075e7d;
                text-decoration: none;
            }
        }
    }
}

.payoneer-default {
    margin: 14px 0 26px;
    box-sizing: border-box;
    padding: 12px 60px 12px 20px;
    min-height: 86px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    position: relative;
    h4 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 14px;
        color: #292929;
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列

        & + p {
            margin-top: 4px;
        }
    }

    p {
        margin: 0;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        line-height: 20px;
        text-align: left;
        font-style: normal;
    }

    & > span {
        position: absolute;
        right: 32px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        padding: 5px;
        cursor: pointer;
        border-radius: 3px;
        &:hover {
            background-color: rgba($color: #000000, $alpha: 0.05);
        }
        svg {
            width: 100%;
            height: 100%;
        }
    }

    & > i {
        position: absolute;
        right: 2px;
        top: 2px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        &:hover {
            color: #b63831;
        }
        svg {
            width: 10px;
            height: 10px;
        }
    }

    &:hover > i {
        display: flex;
    }
}

.payoneer-input {
    padding-bottom: 26px;
    height: 382px;
    margin-top: 14px;
    padding-top: 4px;
    box-sizing: border-box;
    .address-form ::v-deep {
        margin: 0 -6px 0;
        position: relative;
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            padding: 0 6px !important;
            margin: 0 0 26px !important;
            &:nth-child(3),
            &:nth-child(4) {
                display: none;
            }
            &:nth-child(11),
            &:nth-child(12) {
                width: 50% !important;
            }
        }
        & > div:nth-child(8) {
            display: none;
        }

        // .el-form-item__content {
        //     line-height: 32px;
        //     vertical-align: top;
        // }

        .el-form-item__label {
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            margin-bottom: 6px;

            &[for='phone'] {
                visibility: hidden;
                & + .el-form-item__content::before {
                    content: 'Phone(optional)';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0px;
                    font-size: 12px;
                    font-weight: bold;
                    color: #000;
                    line-height: 14px;
                }
            }
        }

        .el-form-item__error {
            word-break: normal;
            position: absolute;
            left: 0px;
            pointer-events: none;
            top: 54px;
            bottom: 0;
        }
    }

    & > a {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #087196;
        text-decoration-line: underline;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        &.active {
            opacity: 1;
            pointer-events: all;
        }
        &:hover {
            text-decoration: none;
            color: #075e7d;
        }
    }
}

.address-list {
    margin-top: 14px;
    height: 382px;
    box-sizing: border-box;
    padding-bottom: 26px;
    display: flex;
    flex-direction: column;

    li {
        cursor: pointer;
        box-sizing: border-box;
        padding: 10px 20px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e6e6e6;

        & + li {
            margin-top: 10px;
        }

        h4 {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #292929;
            line-height: 18px;
            text-align: left;
            font-style: normal;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列

            & + p {
                margin-top: 4px;
            }
        }

        p {
            margin: 0;
            font-family: Roboto, Roboto;
            font-weight: 400;
            font-size: 14px;
            color: #555555;
            line-height: 20px;
            text-align: left;
            font-style: normal;
        }

        &:hover {
            background: #f6f6f6;
        }
    }
}
</style>
